<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加管理员</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <style type="text/css">
        :root {
			--primary-gradient: linear-gradient(135deg, #667eea, #764ba2);
			--primary-gradient-alt: linear-gradient(135deg, #ff6b6b, #ffa500);
			--secondary-gradient: linear-gradient(135deg, #1d976c, #93f9b9);
			--accent-gradient: linear-gradient(135deg, #50c9c3, #96deda);
			--dark-bg: #0f1116;
			--card-bg: rgba(30, 33, 42, 0.7);
			--border-color: rgba(255, 255, 255, 0.1);
			--text-primary: #ffffff;
			--text-secondary: #b0b0b0;
			--success: #28a745;
			--danger: #dc3545;
			--warning: #ffc107;
			--info: #17a2b8;
			--transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            min-height: 100vh;
        }

        .add-container {
            max-width: 600px;
            margin: 0 auto;
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
        }

        .add-header {
            background: var(--primary-gradient);
            color: white;
            padding: 20px 30px;
            text-align: center;
        }

        .add-header h3 {
            margin: 0;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .add-header h3 i {
            margin-right: 10px;
            font-size: 1.5rem;
        }

        .add-body {
            padding: 30px;
            background-color: white;
        }

        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .form-table th {
            background: linear-gradient(135deg, #2c3e50, #34495e);
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            width: 30%;
        }

        .form-table td {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
        }

        .form-table tr:last-child td {
            border-bottom: none;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: rgba(0, 0, 0, 0.2);
            color: var(--text-primary);
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            outline: none;
            background: rgba(0, 0, 0, 0.3);
        }

        .btn-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .btn-submit {
            background: var(--secondary-gradient);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-reset {
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-submit:hover, .btn-reset:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .error {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 5px;
            display: block;
        }

        .back-btn {
            display: block;
            text-align: center;
            margin-top: 25px;
        }

        .back-btn a {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
            color: white;
            border-radius: 5px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .back-btn a:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-decoration: none;
            color: white;
        }

        @media (max-width: 768px) {
            .add-body {
                padding: 20px 15px;
            }

            .form-table {
                font-size: 0.9rem;
            }

            .form-table th,
            .form-table td {
                padding: 10px 5px;
                display: block;
                width: 100%;
                text-align: left;
                box-sizing: border-box;
            }

            .form-table th {
                background: #2c3e50;
                margin-top: 10px;
            }

            .btn-group {
                flex-direction: column;
            }
        }
    </style>
    <script type="text/javascript">
        $().ready(function() {
            $("#myform").validate({/*表单信息验证*/
                rules : {
                    username : "required",
                    password : "required",
                    password_2 : {
                        required : true,
                        equalTo : "#password"
                    }
                },
                messages : {
                    username : {
                        required : "请输入用户名",
                    },
                    password : {
                        required : "请输入密码",
                    },
                    password_2 : {
                        required : "请输入密码",
                        equalTo : "两次密码输入不一致",
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }
            });
        });
    </script>
</head>
<body>
<div class="add-container">
    <div class="add-header">
        <h3><i class="fas fa-user-plus"></i> 添加管理员</h3>
    </div>

    <div class="add-body">
        <form action="${pageContext.request.contextPath}/AddManager_Servlet" method="post" id="myform">
            <table class="form-table">
                <tr>
                    <th>身份</th>
                    <td>管理员</td>
                </tr>
                <tr>
                    <th>用户名</th>
                    <td>
                        <input type="text" name="username" class="form-control" id="username" />
                    </td>
                </tr>
                <tr>
                    <th>密码</th>
                    <td>
                        <input id="password" name="password" type="password" class="form-control">
                    </td>
                </tr>
                <tr>
                    <th>确认密码</th>
                    <td>
                        <input type="password" name="password_2" class="form-control" id="password_2" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center; background: transparent; border: none;">
                        <div class="btn-group">
                            <button type="submit" class="btn-submit"><i class="fas fa-plus-circle"></i> 添加</button>
                            <button type="reset" class="btn-reset"><i class="fas fa-redo"></i> 重置</button>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
        
        <div class="back-btn">
            <a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
        </div>
    </div>
</div>
</body>
</html>